<template>
    <div class="hello">
        <Demo v-bind:num="num"></Demo>
        <h1>我是home</h1>
        <span>{{num}}</span>
        <div>{{msg}}</div>
        <input type="text" v-model="msg">
        <router-link to="/login">去login</router-link>
        <button v-on:click="num +=1 ">add</button>
        <el-button type="primary">主要按钮</el-button>
        <input type="text">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
            <el-form-item label="" prop="name">
                <div class="input-row">
                    <img src="../assets/login/user-icon.png" alt="">
                    <el-input placeholder="用户名" size="small" v-model="ruleForm.name">
                    </el-input>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import Demo from "./demo.vue";
export default {
    name: "HelloWorld",
    components: {
        Demo
    },
    data() {
        return {
            num: 1,
            msg: "",
             ruleForm: {
                name: ""
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入活动名称",
                        trigger: "change"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 3 到 5 个字符",
                        trigger: "change"
                    }
                ]
            }
        };
    },
    methods: {
        add() {
            ++this.num;
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
// input{
//     height:30px;
//     width:100px;
//     border:1px solid #e5e5e5;
//     outline: none;
//     &:focus{
//         border:1px solid #a1e0ed;
//         box-shadow: 0 0 8px #a1e0ed;
//     }
// }
</style>
